<script lang="ts" setup>
import { ref,onMounted} from "vue";
import Masonry from "@/components/Masonry.vue"
import {createRandomChinese} from '@/utils'
const masonry = ref()
const data = ref({})


const randData = (count:number)=>{
    return Array.from({length:count},(_,_i)=>{

        return {
            title: createRandomChinese( Math.floor((Math.random()*10)+30) ) ,
            imgw:300,
            imgh:200,
            bgcolor:"rgb("+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+","+ Math.floor(Math.random() * 256)+",0.3)",
            img: `https://picsum.photos/300/200/?`+Math.random()
        }
    })
}
const randNewsData = (count:number)=>{
    return Array.from({length:count},(_,_i)=>{
        return {
            title: createRandomChinese( Math.floor((Math.random()*10)+10) ) ,
            hots:Math.floor((Math.random()*10)+30),
            icon:"../src/assets/icons/hot_"+(Math.floor(Math.random()*5+1))+'.png'
        }
    })
}
const news = ref()




onMounted(()=>{
    data.value = randData(20)
    news.value = randNewsData(40)
})
const appends = ref()
// 加载更多数据
const loadmore = ()=>{
    appends.value = randData(20)
    
}
</script>
<template>
    <div id="infinite-list" style="overflow-y: scroll;height: 100%;">
        <div style="margin:0 22px;display: flex;">
            <div  style="padding:0 10px; width: 100%;height: 100%;box-sizing: border-box;">
                <h3 style="padding: 1rem 0;font-weight: 500;">热门视频</h3>
                <Masonry ref="masonry" @loadmore="loadmore" :appends="appends" :data="data" :gap="15" :colWidth="280" :columns="4" eid="infinite-list"/>
            </div>
            <div class="news-list">
                <h3 style="padding: 1rem 0;font-weight: 500;">热榜</h3>
                <ul>
                    <li v-for="(item,index) in news">
                        <div class="h-title">
                            <div class="h-rank" > {{ index + 1 }} </div>
                            <div style="flex: 1;">
                                
                                <div style="display: flex;">
                                    <h3 class="">{{ item.title }}</h3>
                                    <div v-if="Math.random()>0.5"><img style="height: 1rem;" :src="item.icon" alt=""></div>
                                </div>

                                <div class="h-detail">
                                    <span>111.8万</span> 热度
                                </div>
                            </div>
                        </div>
                        
                    </li>
                </ul>
            </div>
        </div>
        
    </div>
</template>
<style scoped>
    .news-list{width: 20rem; height: 100%;padding: 0 8px 0 22px;}
    .news-list ul,.news-list li{ width: 100%;}
    .news-list li{ margin-bottom: 1rem;}
    .news-list ul li .h-title{display: flex;}
    .news-list ul li .h-title h3{ 
        height: 22px;
        line-height: 22px;
        word-break: break-all;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        color: var(--color-text-t1);
        cursor: pointer;
        font-size: 1rem;
        overflow: hidden;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        margin-bottom: 0.2rem;
    }
    .news-list ul li .h-title .h-rank{ width: 1.6em;}
    .news-list .h-detail{ color: var(--color-text-t3);font-size: 0.825rem;font-weight: 500; line-height: 22px;}
</style>


